<template>
  
</template>
<script setup lang="ts">

// Eventloop 事件循环
// 在 js 中具有一个主线程，执行栈，任务队列
// 所有的 js 代码按从上至下的顺序加载后，将各个任务从下到上反向添加到执行栈内
// 主线程从执行栈顶取出对应任务进行执行
// 任务分为同步任务和异步任务，对于同步任务，主线程等待任务执行完毕后再执行下一个任务
// 对于异步任务，主线程将调用对应的 API 执行，不用等待执行结果完成，就可以执行下一个任务
// 异步任务调用对应 API 执行完毕后，会将结果传递给回调函数，回调函数会按执行完成的顺序添加到任务队列中
// 异步任务分为微任务(Promise MaintainObservation process.nextTick(nodejs))和宏任务(包括 script)
// 且二者具有不同的任务队列
// 由于整个 script 为一宏任务，故初始执行完毕所有的同步任务后，视为将一个大的宏任务执行完毕
// 当执行完一次宏任务任务后，执行栈为空，会从微任务队列中将此时所有的微任务添加到执行栈
// 执行完毕所有的微任务后，再将下一个宏任务从宏任务队列中添加到执行栈
// Eventloop 即宏任务和微任务的循环添加到执行栈被主线程执行调用，宏任务每次添加一个，微任务每次清空队列

async function prom() {
  console.log('y')
  await Promise.resolve()
  console.log('x')
}
setTimeout(()=>{
  console.log('1')
  Promise.resolve().then(()=>{
    console.log('2')
  })
},0)
setTimeout(()=>{
  console.log('3')
  Promise.resolve().then(()=>{
    console.log('4')
  })
},0)
Promise.resolve().then(()=>{
  console.log('5')
})
Promise.resolve().then(()=>{
  console.log('6')
})
Promise.resolve().then(()=>{
  console.log('7')
})
Promise.resolve().then(()=>{
  console.log('8')
})
prom()
console.log('0')
</script>
<style scoped lang="less">

</style>
